<template>
	<view class="">
		<!-- 	<u-navbar :bgColor="bgColor" title="收藏列表" :titleStyle="titleStyle" leftIconColor="#ffffff"
			:autoBack="true"></u-navbar>
		<view class="" :style="{'height':globalData.navHeight-10 +'px'}"></view> -->

		<view class="btntop">
			<view v-if="showFlag" class="btn" @click="handleShowflag">
				管理
			</view>
			<view v-else class="btn" @click="handleShowflag">
				完成
			</view>
		</view>
		<view class="" style="height:98rpx ;"></view>

		<view v-if="dataList.length" class="dataBox">

			<view class="dataItemBox" v-for="(item,index) in dataList" :key="index">
				<view v-if="!showFlag" class="" style="margin-right: 30rpx;" @click="handleSetcheck(index)">
					<image v-if="item.check" class="refreshimg" src="http://120.76.245.175/uploads/image/selected.png"
						style="width: 56rpx; height: 56rpx;">
					</image>
					<image v-else class="refreshimg" src="http://120.76.245.175/uploads/image/kong.png"
						style="width: 56rpx; height: 56rpx;">
					</image>
				</view>
				<view class="dataItem" @click="handleDetail(item.house.id)">
					<view class="dataItemLft">
						<image class="refreshimg" :src="item.house.image" style="width: 240rpx; height: 240rpx;">
						</image>
					</view>
					<view class="dataItemRight">
						<view class="name">
							{{item.house.name}}
						</view>
						<view class="distanceBox">
							<view v-if="item.house.remark" class="distance">
								距离地铁{{item.house.remark}}
							</view>
						</view>
						<view class="advantage">
							<view class="advantageitem" v-for="(subitem,index) in item.house.advantage" :key="item.id">
								{{subitem.name}}
							</view>
						</view>
						<view class="expense">
							<view class="expenseitem">
								{{item.house.price}}元/月
							</view>
						</view>

					</view>
				</view>

			</view>
		</view>



		<view v-else class="empty-sty">
			<u-empty mode="data" text="无收藏房源" icon="http://cdn.uviewui.com/uview/empty/data.png">
			</u-empty>
		</view>




		<view class="" style="height: 200rpx;"></view>

		<view v-if="!showFlag" class="footer">

			<view class="footerleft">
				<view class="" @click="handleAllFlag">
					<image v-if="allFlag" class="refreshimg" src="http://120.76.245.175/uploads/image/selected.png"
						style="width: 56rpx; height: 56rpx;">
					</image>
					<image v-else class="refreshimg" src="http://120.76.245.175/uploads/image/kong.png"
						style="width: 50rpx; height: 50rpx;">
					</image>
				</view>
				<view class="" style="margin-left: 20rpx;">
					全选
				</view>
			</view>

			<view class="btn" @click="handleClose">
				取消收藏
			</view>

		</view>


	</view>
</template>

<script>
	import {
		houseCollectlist,
		housedelCollect
	} from "@/api/api.js"
	export default {
		data() {
			return {
				bgColor: "#F8AD22",
				titleStyle: {
					color: "#ffffff",
					fontSize: "32rpx",
					fontFamily: "PingFang SC-Bold, PingFang SC",
					fontweight: "bold",
				},
				globalData: {
					statusBarHeight: 0, // 状态导航栏高度
					navHeight: 0, // 总体高度
					navigationBarHeight: 0, // 导航栏高度(标题栏高度)
				},
				showFlag: true,
				pageNum: 1,
				dataList: [],
				allFlag: false,
			}
		},
		onLoad() {
			this.houseCollectlist()
			this.getNavbarHeight()
		},
		onShow() {
			this.houseCollectlist()
		},
		methods: {
			async houseCollectlist() {
				let res = await houseCollectlist({
					page: this.pageNum,
					page_size: 10
				})
				if (res.code == 1000) {
					this.dataList = res.data.data
					this.dataList.forEach((item, index) => {
						item.check = false
					})
					console.log("收藏列表", this.dataList)
				}
			},
			handleSetcheck(index) {
				console.log("444444444", index)
				this.dataList[index].check = !this.dataList[index].check
				let flag = true
				this.dataList.forEach((item, index) => {
					if (item.check == false) {
						flag = false
					}
				})
				this.allFlag = flag
				this.$forceUpdate()
				console.log("this.dataList", this.dataList[index].check)
			},

			handleAllFlag() {
				this.allFlag = !this.allFlag

				this.dataList.forEach((item, index) => {
					item.check = this.allFlag
				})
			},

			handleClose() {
				let that = this
				uni.showModal({
					title: '提示',
					content: '确定要取消收藏吗',
					cancelText: "取消",
					confirmText: "确定",
					confirmColor: "#2375CA",
					success: async function(res) {
						if (res.confirm) {

							let ids = []
							that.dataList.forEach((item, index) => {
								if (item.check) {
									ids.push(item.id)
								}
							})
							console.log("ids", ids)
							let res = await housedelCollect({
								ids: ids
							})
							if (res.code == 1000) {
								uni.showToast({
									title: '已取消收藏！',
									icon: "none",
									duration: 1000
								});
								that.houseCollectlist()
							} else {
								uni.showToast({
									title: res.message,
									icon: "none",
									duration: 1000
								});
							}

						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},

			handleDetail(id) {
				uni.navigateTo({
					// url: "../home/homedetail"
					url: `../home/homedetail?id=${id}`
				})
			},

			handleShowflag() {
				this.showFlag = !this.showFlag
			},
			getNavbarHeight() {
				// 状态栏高度
				this.globalData.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

				// #ifdef MP-WEIXIN
				// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
				const custom = wx.getMenuButtonBoundingClientRect()
				// console.log(custom)

				// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
				this.globalData.navigationBarHeight = custom.height + (custom.top - this.globalData.statusBarHeight) * 2
				// console.log("导航栏高度："+this.globalData.navigationBarHeight)

				// 总体高度 = 状态栏高度 + 导航栏高度
				this.globalData.navHeight = this.globalData.navigationBarHeight + this.globalData.statusBarHeight

				// #endif

				console.log("高度", this.globalData)

			},
		}
	}
</script>

<style scoped lang="scss">
	.btntop {
		width: 100%;
		height: 88rpx;
		background: #FFFFFF;
		padding: 15rpx 0;
		box-sizing: border-box;
		position: fixed;


		.btn {
			width: 128rpx;
			height: 54rpx;
			background: #F8AD22;
			border-radius: 200rpx 200rpx 200rpx 200rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 28rpx;
			text-align: center;
			line-height: 54rpx;
			margin-left: 590rpx;
		}
	}

	.dataBox {
		width: 690rpx;
		margin: 20rpx auto;
	}

	.dataItemBox {
		display: flex;
		align-items: center;
	}

	.dataItem {
		display: flex;
		width: 690rpx;
		padding: 10rpx;
		box-sizing: border-box;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin-bottom: 20rpx;

		.dataItemLft {
			margin-right: 20rpx;
		}

		.dataItemRight {
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			.name {
				font-size: 28rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 33rpx;

			}

			.distanceBox {
				font-size: 22rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 26rpx;
				display: flex;
				justify-content: space-between;

			}

			.advantage {
				display: flex;

				.advantageitem {
					width: 80rpx;
					height: 40rpx;
					background: #FFF5E1;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					font-size: 20rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F06703;
					line-height: 40rpx;
					text-align: center;
					margin-right: 30rpx;
				}
			}

			.expense {
				display: flex;
				justify-content: space-between;

				.expenseitem {
					font-size: 30rpx;
					font-family: PingFang SC-Bold, PingFang SC;
					font-weight: bold;
					color: #F23A00;
					line-height: 35rpx;
				}

				.collect {
					font-size: 22rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #F8AD22;
					line-height: 26rpx;
				}
			}
		}
	}


	.footer {
		width: 750rpx;
		padding: 16rpx 30rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		padding-bottom: constant(safe-area-inset-bottom);
		/* 兼容 iOS 设备 */
		padding-bottom: env(safe-area-inset-bottom);

		/* 兼容 iPhone X 及以上设备 */
		.footerleft {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #666666;
			line-height: 33rpx;
		}

		.btn {
			width: 240rpx;
			height: 88rpx;
			background: #F23A00;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
		}
	}
</style>